<template>
   <div style="display: flex;flex-direction: column;">
     <div style="display: flex;flex-direction: row">
       <div id="Two_One" style="width: 780px;height: 450px;margin-right: 50px"></div>
       <div id="Two_Two" style="width: 780px;height: 450px"></div>
     </div>
        <button @click="change(1)" class="button" style="top: 650px" >人文艺术</button>
        <button @click="change(2)" class="button" style="top: 700px">人文社科</button>
        <button @click="change(3)" class="button" style="top: 750px">少儿童书</button>
        <button @click="change(4)" class="button" style="top: 800px">经济金融</button>
        <button @click="change(5)" class="button" style="top: 850px">生活休闲</button>
        <button @click="change(6)" class="button" style="top: 900px">教育考试</button>
        <div id="Two_Three" style="width: 1610px;top:550px;position: absolute;z-index: 0">
     </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";




export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Two",
  data(){
    return{
      dataX:[],
      dataY:[],
      //第一张表
      ChartData:[],
      //第二张表（散点图）
      ScatterPlot:[],

      //彩虹图
      price:[],
      slave:[],

    }
  },
  created() {

  },
  mounted(){
    this.change()
    this.getTwoThree()
    this.getTwoOne()
    this.getTwoTwo()
    this.$nextTick(()=>{ this.twoOne(),this.TwoTwo()})
  },
  methods:{
    //第一张表
    getTwoOne(){
      let myChart = echarts.init(document.getElementById('Two_One'),'dark',{width:"780px",height:"450px"});
      let option = {
        title: {
          text: '书籍价格分区',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'new',
            type: 'pie',
            radius: '50%',
            data: this.ChartData.length===0?[0]:this.ChartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option)
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },


    //第二张表
    getTwoTwo(){
      let myChart = echarts.init(document.getElementById('Two_Two'),'dark',{width:"780px",height:"450px"});
      let option = {
        title: {
          text: '价格与销量之比',
          left: 'center'
        },
        xAxis: {},
        yAxis: {},
        series: [
          {
            symbolSize: 10,
            data: this.ScatterPlot[0],
            type: 'scatter'
          }
        ]
      };
      myChart.setOption(option)
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },


    //区间图
    getTwoThree(){
      let myChart = echarts.init(document.getElementById('Two_Three'),'dark',{width:"1610px",height:"450px"});
      let option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: 'Large Area Chart'
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateX
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10
          },
          {
            start: 0,
            end: 10
          }
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: this.dataY
          }
        ]
      };
      myChart.setOption(option)
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },


    //第一张表接口
    twoOne(){
      this.getTwoOne()
      axios.get("api/information/prices").then(res=>{
          let data=res.data
        for(var key in data){
          let Thisdata={value:data[key],name:key}
          this.ChartData.push(Thisdata)
        }
        this.getTwoOne()
      })
    },

    //散点图
    TwoTwo(){
      this.getTwoTwo()
      axios.get('/api/book/scatterDiagram').then(res=>{
        this.ScatterPlot.push(res.data)
        this.getTwoTwo()
      })
    },

    //彩虹图


    change(e=1){
      axios.get('/api/information/rainbow/',{
        params:{
          type:e
        }
          }

      ).then(res=>{
        this.dataX=[]
        this.dataY=[]
        for (const obj in res.data){
          this.dataX.push(res.data[obj].sales)
          this.dataY.push(parseInt(res.data[obj].price))
        }
        this.getTwoThree()
      })
    }
  }
}
</script>

<style scoped>


.button{
  position: absolute;
  z-index: 1;
  width: 100px;
  background-color: #3e0657;
  height: 50px;
  color: white;
}
</style>